<template>
    <h1>显示</h1>
    状态：
    <input type="radio" v-model="query.State" name="State" value="false">禁用
    <input type="radio" v-model="query.State" name="State" value="true">启用
    房间号：
    <input type="text" v-model="query.Num">
    <input type="button" value="查询" @click="Cha">
    <input type="button" value="重置" @click="chong">
    <div>
        <table border="1">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>房间号</th>
                    <th>状态</th>
                    <th>创建时间</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="h in data">
                    <th>{{ h.Name }}</th>
                    <th>{{ h.Num }}</th>
                    <th>{{ h.State?"启用":"禁用" }}</th>
                    <th>{{ h.CreateTime }}</th>
                    <th>
                        <input type="button" value="删除" @click="Del(h.Id)">
                    </th>
                </tr>
            </tbody>
        </table>
        一共 {{ querydata.count }}  条
        当前 {{ query.PageIndex }}   页
        一共{{ querydata.pagecount }}  页
        一页 {{ query.PageSize }}  条
        <input type="button"  v-for="h in querydata.pagecount" :value="h" @click="YE(h)">
        <input type="button" value="首页" @click="Fen(1)">
        <input type="button" value="上一页" @click="Fen(2)">
        <input type="button" value="下一页" @click="Fen(3)">
        <input type="button" value="尾页" @click="Fen(4)">
        <input type="number" v-model="query.PageSize" @click="shu">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { onMounted } from 'vue';

const Del=(val:any)=>{
    if(confirm('确定删除吗？')){
        axios.delete("https://localhost:7034/api/Member/DelMember",{params:{Id:val}}).then(res=>{
        if(res.data>0){
            alert('删除成功')
            Show();
        }
        else{
            alert('失败')
        }
    })
    }
    
}


const chong=()=>{
    query.value.State="",
    query.value.Num="",
    Show();
}

const Cha=()=>{
    query.value.PageIndex=1;
    Show();
}

const shu=()=>{
    Show();
}


const YE=(h:any)=>{
    query.value.PageIndex=h;
    Show();
}

const Fen=(val:any)=>{
    if(val==1){
        query.value.PageIndex=1;
        Show();
    }
    if(val==2){
        if(query.value.PageIndex>1){
            query.value.PageIndex-=1;
            Show();
        }
    }
    if(val==3){
        if(query.value.PageIndex<querydata.value.pagecount){
            query.value.PageIndex+=1;
            Show();
        }
    }
    if(val==4){
        query.value.PageIndex=querydata.value.pagecount;
        Show();
    }
}



const data=ref([{
    "Id": 0,
  "Name": "",
  "Num": "",
  "State": true,
  "CreateTime": "2025-04-14T01:54:44.130Z"
}])

const query=ref({
    State:"",
    Num:"",
    PageIndex:1,
    PageSize:3
})

const querydata=ref({
    count:0,
    pagecount:0
})


onMounted(()=>{
    Show();
})

const Show=()=>{
      axios.get("https://localhost:7034/api/Member/GetMember",{params:query.value}).then(res=>{
            data.value=res.data.list;
            querydata.value.count=res.data.count;
            querydata.value.pagecount=Math.ceil(querydata.value.count/query.value.PageSize)
      })  
}



</script>

